@import 'base.less';
@import 'common.less';


// mobile布局
@media screen and (max-width: 768px) {
	body{
		background: url(../img/turntable_background.jpg) no-repeat;
		background-size: cover;
	}

	table,.avatar{
		display: none;
	}
	.header-body{
		.display-box();
		.box-align();
		.box-pack();
	}
	.rotate-body{
		.display-box();
		.box-align();
		position: relative;
		width: 240pt;
   	 	height: 240pt;
   	 	margin: 100pt auto 0 auto;
		background: url(../img/rotate_background.png) no-repeat center center;
		background-size: 100%;
		.rotate-btn{
			.display-box();
			position: absolute;
			width: 40%;
			top: -3pt;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto auto;
		}
		#rotateBody{
			position: relative;
			margin: auto;
			.display-box();
			.box-align();
			width: 180pt;
		    height: 181pt;
		    top: -4pt;
		    left: 1pt;
		}
	}

	.article-body{

		margin-top: 16pt;
		background: rgb(249, 163, 2);
		padding: 9pt 7pt;
		article{
			overflow-y:scroll;
			height: 210pt;
			background: #fff;
			border-radius: 8px;
			padding: 26pt 0.3rem;
			h6{
				color: rgb(2, 102, 134);
				font-size: 0.3rem;
				padding-bottom: 3pt;
			}
			.beizhu{
				font-size: 0.24rem;
			}
			p{
				font-size: 0.26rem;
				color: rgb(33, 23, 21);
			}
		}
	}

	footer{
		cursor: pointer;
		line-height: 32pt;
		text-align: center;
		height: 32pt;
		color: #fff;
		font-size: 0.3rem;
		width: 100%;
		background: rgb(153, 201, 213);
	}
}

// PC布局
@media screen and (min-width: 769px) {
	html{
		background: rgb(238, 238, 241)
	}
	body{
		margin: 0 auto;
		width: 1280px;
	}
	.body{
		position: relative;
		width: 100%;
		height: 100%;
		background: url(../img/turntable_background_pc.jpg) no-repeat;
		background-size: cover;
	}
	.head-body{
		float: left;
		display: inline;
		margin-left: 240pt;
		margin-bottom: 4pt;
		.avatar{
			float: left;
			display: inline;
			margin-top: 284pt;
			img{
				width: 90pt;
				height: 90pt;
			}
			margin-right: 60pt;
		}
	}

	.rotate-body{
		float: left;
		position: relative;
		margin-top: 25pt;
		width: 370pt;
		height: 370pt;
		background: url(../img/rotate_background.png) no-repeat;
		background-size: 370pt;
		.rotate-btn{
			position: absolute;
			height: 146pt;
			width: 146pt;
		    top: 0;
		    bottom: 3pt;
		    left: 1pt;
		    right: 0;
			margin: auto;
		}
		#rotateBody{
			top: 0;
		    bottom: 11pt;
		    left: 0;
		    right: -2pt;
		    margin: auto;
		    position: absolute;
		    width: 278pt;
		}
	}

	.article-body{
		display: block;
		float: left;
		width: 495pt;
		height: 262pt;
		margin-top: 23pt;
		margin-left: 230pt;
		background: rgb(249, 163, 2);
		padding: 11pt 13pt;
		article{
			float: left;
			overflow-y:scroll;
			height: 210pt;
			background: #fff;
			border-radius: 8px;
			padding: 22pt 26pt;
			h6{
				color: rgb(2, 102, 134);
				font-size: 0.36rem;
				padding-bottom: 9pt;
			}
			p{
				font-size: 0.3rem;
				color: rgb(33, 23, 21);
			}
		}
	}
	.table-btn{
		margin: 0 auto;
		tr{
			padding-left: 10pt;
		}
		td{
			height: 33pt;
			color: rgb(91, 87, 86);
			font-size: 0.36rem;
			.btn-border{
				margin-left: 10pt;
				color: rgb(91, 87, 86);
				margin: 0 auto;
				border: 1px solid rgb(173, 173, 173);
				float: left;
				line-height: 33pt;
				height: 33pt;
				width: 207pt;
				img{
					float: left;
					width: 26pt;
					height: 26pt;
					margin: 3pt 10pt;
				}
				span{
					font-weight: normal;
					font-size: 0.36rem;
					float: left;
					line-height: 33pt;
				}
				span:nth-child(3){
					margin: 0 10pt;
				}
			}
			.btn-border:first-child{
				margin-left: 7pt;
				margin-right: 11pt;
			}
		}
	}
	.btn-body{
		display: none;
	}
	footer{
		display: block;
		float: left;
		cursor: pointer;
		line-height: 32pt;
		text-align: center;
		height: 32pt;
		color: #fff;
		font-size: 0.3rem;
		width: 100%;
		background: rgb(153, 201, 213);
	}
}



// iphone4等小屏机按钮适配
@media screen and (min-width: 321px) and (max-width: 768px) {
  .btn-body{
		.display-box();
		.box-orient(horizontal);
		.box-pack();
		color: rgb(91, 87, 86);
		font-size: 0.28rem;
		.btn-border{
			.display-box();
			.box-align();
			padding: 2pt 10pt 2pt 0;
			border: 1px solid rgb(173, 173, 173);
			border-radius: 4px;
			img{
				.display-box();
				.box-align();
				margin-left: 6pt;
				margin-right: 4pt;
				height: 19pt;
				width: auto;
			}
		}
		.btn-border:first-child{
			margin-right: 8pt;
		}
	}
}

// 大屏机按钮适配
@media screen and (max-width: 320px) {
	.btn-body{
		.display-box();
		.box-orient(horizontal);
		.box-pack();
		color: rgb(91, 87, 86);
		font-size: 0.26rem;
		.btn-border{
			.display-box();
			.box-align();
			padding: 2pt 4pt 2pt 0;
			border: 1px solid rgb(173, 173, 173);
			border-radius: 4px;
			img{
				.display-box();
				.box-align();
				margin-left: 1pt;
				margin-right: 1pt;
				height: 18pt;
				width: auto;
			}
			a{
				color: rgb(249, 163, 2);
			}
		}
		.btn-border:first-child{
			margin-right: 2pt;
		}
	}
}

.article-body{
	margin-bottom: 32pt;
}

a{
	cursor: pointer;
	color: rgb(249, 163, 2);
}

.rotate-btn,footer{
	cursor: pointer;
}
